<!--
 * @Author: byron
 * @Date: 2022-01-13 13:54:01
 * @LastEditTime: 2022-02-09 00:38:21
-->
<template>
    <span
        class="icon "
        :class="{ back: _back }"
        :style="_hover ? '' : 'background-color: #e5e5e5;'"
        @click="iconBtn"
    >
        <i :class="['iconfont', iconType]"></i>
    </span>
</template>

<script>
export default {
    components: {},
    props: {
        _type: {
            type: String,
            default: 'delete',
        },
        _back: {
            type: Boolean,
            default: true,
        },
        _hover: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {}
    },
    watch: {},
    computed: {
        iconType() {
            return 'icon-' + this._type
        },
    },
    methods: {
        iconBtn() {
            this.$emit('iconHandle')
        },
    },
    created() {},
    mounted() {},
}
</script>
<style lang="less" scoped>
.icon {
    transition: all 1s;
    cursor: pointer;
    vertical-align: middle;
}
.back {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
}
.back:hover {
    background-color: #e5e5e5;
}
</style>
